<!--
  * @Description: 机构认证列表
  * @Author: xinqiao lxq1990.0716@qq.com
  * @Date: 2024-03-05
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-05-15
-->

<script lang="ts" setup>
  import { onMounted, reactive, ref, watch } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestCompanyCertificationPage } from '/@/api/business/datamarket/companyCertification'
  import { StatusDesc } from '/@/api/business/datamarket/companyCertification/enum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'

  const router = useRouter()

  /** 搜索条件 */
  const searchParam = reactive({
    /** 状态 */
    status: undefined,
    /** 机构名称 */
    companyName: '',
    /** 开始时间 */
    startTime: '',
    /** 结束时间 */
    endTime: '',
  })

  /** 搜索条件-发起日期 */
  const searchTimes = ref([])

  watch(
    () => searchTimes.value,
    (val) => {
      if (val?.length > 0) {
        searchParam.startTime = val[0]
        searchParam.endTime = val[1]
      }
    },
  )

  /** 搜索条件下拉项 */
  const searchOptions = reactive({
    /** 状态 */
    status: Object.entries(StatusDesc).map((item) => ({ value: parseInt(item[0]), label: item[1] })),
  })

  /** 表格配置 */
  const columns = [
    { title: '编号', dataIndex: 'applyNo' },
    { title: '企业名称', dataIndex: 'companyName' },
    { title: '申请人', dataIndex: 'applyUserName' },
    { title: '申请时间', dataIndex: 'createdTime' },
    { title: '状态', dataIndex: 'status', customRender: ({ text }) => StatusDesc[text] },
    { title: '操作', key: 'action' },
  ]

  /** 分页查询hook */
  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<CompanyCertificationPageTypes.IRequest, CompanyCertificationPageTypes.IResponse[]>(searchParam, requestCompanyCertificationPage)

  onMounted(() => queryList())

  /**
   * 重置
   */
  const clear = () => {
    searchParam.status = undefined
    searchParam.companyName = ''
    searchTimes.value = []
    searchParam.startTime = ''
    searchParam.endTime = ''
  }

  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })

  /**
   * 查看（跳转详情页）
   * @param id 企业认证id
   */
  const goDetail = (id: number) => router.push(`./detail?id=${id}`)
</script>

<template>
  <div class="ssc-list org-dept-list">
    <div class="ssc-search">
      <a-row :gutter="24">
        <a-col :span="5">
          <a-form-item label="状态">
            <a-select v-model:value="searchParam.status" :options="searchOptions.status" allowClear placeholder="请选择" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="发起日期">
            <a-range-picker v-model:value="searchTimes" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="机构名称">
            <a-input v-model:value="searchParam.companyName" :maxlength="20" allowClear placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-row justify="end">
            <a-button @click="clear()">重置</a-button>
            <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">机构认证</span>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <span>
              <a @click="goDetail(record.id)">查看</a>
            </span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<style lang="less" scoped></style>
